<script>
import Form from './index.vue'
import WithDialog from '@/components/WithDialog/withDialog'
import { Props } from '@/components/WithDialog/withDialog'

export default {
  components: {
    Form,
    WithDialog
  },
  props: { ...Props },
  computed: {
    dialogAttrs() {
      const keys = Object.keys(Props)
      const attrs = {}

      for (const key of keys) {
        attrs[key] = this[key]
      }

      return attrs
    },
    listeners() {
      const listeners = { ...this.$listeners }

      const unnecessaryListener = [
        'input'
      ]

      for (const listener of unnecessaryListener) { delete listeners[listener] }

      return listeners
    },
    hasFooterSlot() {
      return this.$slots.footer !== undefined
    }
  },
  methods: {
    async handleConfirm() {
      const valid = await this.$refs.form.valid()
      if (!valid) return
      this.$emit('confirm')
    },
    handleCancel() {
      this.$emit('cancel')
    },
    resetFields() {
            this.$refs['form']?.resetFields?.()
    }
  }
}
</script>

<template>
  <el-dialog
    v-bind="dialogAttrs"
    v-on="listeners"
  >
    <Form ref="form" v-bind="$attrs" />
    <div
      slot="footer"
      class="dialog-footer"
    >
      <slot
        v-if="hasFooterSlot"
        slot="footer"
        name="footer"
      />

      <template v-else>
        <el-button
          :disabled="cancelBtnDisabled"
          @click="handleCancel"
        >
          {{ cancelText }}
        </el-button>

        <el-button
          type="primary"
          :loading="confirmBtnLoading"
          :disabled="confirmBtnDisabled"
          @click="handleConfirm"
        >
          {{ confirmText }}
        </el-button>
      </template>
    </div>
  </el-dialog>
<!--  <WithDialog v-bind="dialogAttrs" v-on="$listeners" @cancel="handleCancel" @confirm="handleConfirm">-->
<!--    -->
<!--  </WithDialog>-->
</template>
